<template>
	<div id="app">
		<div class="login_containter">
			<div class="login_box">
				<div class="img_box">
					<img src="../assets/logo.png">
				</div>
				<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" class="loginForm">
				  <el-form-item prop="username">
				    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
				  </el-form-item>
				  <el-form-item prop="userpwd">
				    <el-input v-model="loginForm.userpwd" show-password prefix-icon="el-icon-lock"></el-input>
				  </el-form-item>
				  <el-form-item class="butns">
					  <el-button type="primary" @click="login">登录</el-button>
					  <el-button type="info">重置</el-button>
				  </el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			loginForm: {
				username: 'admin',
				userpwd: '123456'
			 },
			 loginFormRules:{
				 username:[
					 { required: true, message: '请输入用户名', trigger: 'blur' },
                     { min: 3, max: 10, message: '长度在 3 到 8 个字符', trigger: 'blur' }
					 ],
				userpwd:[
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
				]
			 }
		}
	},
	methods:{
		login(){
			// 进行预验证 表单验证通过才能发送登录请求
			 this.$refs.loginForm.validate(async valid =>{
				// 如果表单验证通过，valid的值被传递为true，否则为false
				if(!valid) return;
				let {data:res} = await this.$http.post('/manager/login',this.loginForm)
				if(res.meta.status !==200) return this.$message.error(res.meta.msg)
				this.$message.success(res.meta.msg)
				// 保存token
				window.sessionStorage.setItem('token',res.data.token)
				// 跳转到后台管理页面
				this.$router.push('/home')
			})
		}
	}
}
</script>

<style lang="scss">
.login_containter{
	background-color: #2b4b6b;
	height: 100%;
}
.login_box{
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	.img_box{
		width: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		height: 130;
		padding: 10px;
		box-shadow: 0 0 10px #ddd;
		position: absolute;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
	img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #eee;
		}
	}
	.loginForm{
		width: 100%;
		position: absolute;
		bottom: 0;
		padding: 0 20px;
		box-sizing: border-box;
		.butns{
			display: flex;
			justify-content: center;
		}
	}
}
</style>

